<template>
  <div class="weather-bg2">
    <div class="bg-wrapper">
      <div>
        <img class="move-target"
             :src="require('@/assets/image/cloud.png')" width="100%" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "WeatherBg2",
}
</script>

<style lang="scss" scoped>
.weather-bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  @keyframes cloudMove2 {
    0% {
      transform: translate(-20%, 6%);
    }
    5% {
      transform: translate(-15%, 0);
    }
    10% {
      transform: translate(-10%, -10%);
    }
    15% {
      transform: translate(-5%, 0%);
    }
    20% {
      transform: translate(0%, 6%);
    }
    25% {
      transform: translate(5%, 0%);
    }
    30% {
      transform: translate(10%, -10%);
    }
    35% {
      transform: translate(20%, 0%);
    }
    40% {
      transform: translate(35%, 6%);
    }
    45% {
      transform: translate(50%, 0%);
    }
    50% {
      transform: translate(45%, 6%);
    }
    55% {
      transform: translate(30%, 1%);
    }
    60% {
      transform: translate(25%, 0%);
    }
    65% {
      transform: translate(20%, -10%);
    }
    70% {
      transform: translate(10%, 0%);
    }
    75% {
      transform: translate(0%, 6%);
    }
    80% {
      transform: translate(-20%, 0%);
    }
    85% {
      transform: translate(-30%, -10%);
    }
    90% {
      transform: translate(-40%, 0%);
    }
    95% {
      transform: translate(-30%, 6%);
    }
    100% {
      transform: translate(-20%, 0);
    }
  }

  .bg-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    .move-target {
      position: fixed;
      width: 100%;
      //transform: translate(-20%, 6%);
      animation: cloudMove2 180s infinite linear;
    }
  }
}
</style>
